<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Fox Junior's jQuery timer tests</title>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquerytimer-min.js"></script>
		<script type="text/javascript" src="js/logger.js"></script>
		<script type="text/javascript" src="js/timer.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<link rel="stylesheet" type="text/css" href="css/test.css"/>
	</head>
	<body>
<h1>Simple jQuery based timer</h1>
<p>Simple usage:</p> 
<code>jQuery.fjTimer({
	interval: 1000,
	repeat: 5,
	tick: function(counter, timerId) {
		alert("tick:" + counter);
	}
});
</code>
<h2>Parameters:</h2>
<ul>
<li><b>interval</b><span> - ticker interval in milliseconds. Default 10;</span></li>
<li><b>repeat</b><span> - number of repeat times or boolean if reapeat forever or in case false not repeat at all. Default false;</span></li>
<li><b>tick</b><span> - ticker function itself with parameter of counter and timerId paramerer if you want to clear interval yourself;</span></li>
<li><b>onComplete</b><span> - function executed when timer finishes his job.</span></li>
</ul>
<fieldset class="example">
<legend>Example 1</legend>
<div class="container">
<p>In half of second do alert</p>
<code class="example">jQuery("button.timer").click(function() {
	jQuery("button.timer").attr('disabled','disabled');
	var logContainer = jQuery("div.timer_logpanel");
	if (logContainer.size() == 0) {
		logContainer = jQuery('&lt;div class="timer_logpanel logpanel"&gtl;&lt;/div&gt;').insertBefore(jQuery("button.timer"));
	}
	logContainer.empty();
	jQuery.fjTimer({
		interval: 500,
		tick: function(counter, timerId) {
			logContainer.append("&lt;p&gt;working only once!&lt;/p&gt;");
		},
		onComplete: function() {
			logContainer.append("&lt;p&gt;complete&lt;/p&gt;");
			jQuery("button.timer").removeAttr('disabled');
		}
	});
});</code>
<p><button class="timer">Click me to test</button></p>
</div>
</fieldset>
<fieldset class="example">
<legend>Example 2</legend>
<div class="container">
<p>Repeat 10 times and change the label of button</p>
<code class="example">jQuery("button.timer2").click(function() {
	jQuery("button.timer2").attr('disabled','disabled');
	var logContainer = jQuery("div.timer_logpanel2");
	if (logContainer.size() == 0) {
		logContainer = jQuery('&lt;div class="timer_logpanel2 logpanel"&gtl;&lt;/div&gt;').insertBefore(jQuery("button.timer2"));
	}
	logContainer.empty();
	jQuery.fjTimer({
		interval: 500,
		repeat: 10,
		tick: function(counter, timerId) {
			logContainer.append("&lt;p&gt;tick: " + counter + "&lt;/p&gt;");
		},
		onComplete: function() {
			logContainer.append("&lt;p&gt;complete&lt;/p&gt;");
			jQuery("button.timer2").removeAttr('disabled');
		}
	});
});</code>
<p><button class="timer2">Click me to test</button></p>
</div>
</fieldset>
<div class="footer">
<div>
<p>If you find this code useful, please help me with more rock'n roll coming!</p>
<p>
	<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
	<input type="hidden" name="cmd" value="_s-xclick"/>
	<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----"/>
	<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
	</form>
</p>
</div>
</div>
	</body>
</html>
